import { useState, useEffect } from "react";
import "./index.less";
import MeauBox from "../components/MeauBox";

function FileItem({ data }: any) {
  const { item, index } = data;
  const { source } = item;

  const cssBySource = source === 'message' ? 'isMessage' : 'isReply';

  const [isShowMessageMeau, setIsShowMessageMeau] = useState(false);

  const handleRightClick = (e: any) => {
    e.preventDefault();
    const flag = !isShowMessageMeau;
    setIsShowMessageMeau(flag);
  };

  const handleDown = () => {
    window.open(item.url);
  }

  return (
    <>
      <div className={`file-item ${cssBySource}`}>
        <img className="message-avatar" src={item.avatar} alt="" />
        <div className="file-item-content text-style" onClick={handleDown} onContextMenu={handleRightClick}>
          <MeauBox isShowBox={isShowMessageMeau} data={data} />
          <div className="white-triangle"></div>
          <div className="file-item-content-left"></div>
          <div className="file-item-content-right">
            <div className="file-item-content-title one-line-text-overflow">{item.fileName}</div>
            <div className="file-item-content-size">{item.fileSize}KB</div>
          </div>
        </div>
      </div>
    </>
  );
}

export default FileItem;
